<template>
  <div>
    <div id="l-map"></div>
    <div id="r-result">
      请输入: <input type="text" id="suggestId" size="20" value="百度" style="width:150px;" />
      请输入半径: <input type="text" size="20" v-model="radius" @blur="changeRadius" style="width:150px;" />
      <div style="float: right; margin-bottom: 15px">
        <a href="javascript:void(0)" @click="goBack"><i class="el-icon-back"></i> 返回上一页</a>
      </div>
    </div>

    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    <div class="panel-body dtCon" id="allmap"></div>


  </div>

</template>
<script>
  import {Map} from '@/utils/map.js'
  let thisBMap = null
  export default {
    name: 'baidu-map',
    data () {
      return {
        queryAll: false,
        ak: 'jQaf679PsGzVB7zZw0R7gdlD',
        schoolPosition: [],
        circle: {},
        radius: null, // 半径
        positionInfo: null,
        circleList: [],
        baiduMap: {}
      }
    },

    created () {

    },
    mounted: function () {
      let that = this
      that.$nextTick(function () {
        Map.BaiDuMap(that.ak).then(BMap => {
          // 百度地图API功能
          thisBMap = BMap
          let map = new BMap.Map('allmap')
          this.baiduMap = map
          map.enableScrollWheelZoom()  // 启用滚轮放大缩小，默认禁用
          map.enableContinuousZoom()    // 启用地图惯性拖拽，默认禁用
          this.position(map) // 根据浏览器定位
          let point = new BMap.Point(116.404, 39.915)

          let ac = new BMap.Autocomplete(    // 建立一个自动完成的对象
            {
              'input': 'suggestId',
              'location': map
            })

          ac.addEventListener('onhighlight', function (e) {  // 鼠标放在下拉列表上的事件
            let str = ''
            let _value = e.fromitem.value
            let value = ''
            if (e.fromitem.index > -1) {
              value = _value.province + _value.city + _value.district + _value.street + _value.business
            }
            str = 'FromItem<br />index = ' + e.fromitem.index + '<br />value = ' + value

            value = ''
            if (e.toitem.index > -1) {
              _value = e.toitem.value
              value = _value.province + _value.city + _value.district + _value.street + _value.business
            }
            str += '<br />ToItem<br />index = ' + e.toitem.index + '<br />value = ' + value
            that.G('searchResultPanel').innerHTML = str
          })

          let myValue
          ac.addEventListener('onconfirm', function (e) {    // 鼠标点击下拉列表后的事件
            let _value = e.item.value
            myValue = _value.province + _value.city + _value.district + _value.street + _value.business
            that.G('searchResultPanel').innerHTML = 'onconfirm<br />index = ' + e.item.index + '<br />myValue = ' + myValue

            map.clearOverlays()    // 清除地图上所有覆盖物
            function myFun () {
              let pp = local.getResults().getPoi(0).point    // 获取第一个智能搜索的结果
              map.centerAndZoom(pp, 18)
              map.addOverlay(new BMap.Marker(pp))    // 添加标注
            }

            let local = new BMap.LocalSearch(map, { // 智能搜索
              onSearchComplete: myFun
            })
            local.search(myValue)
          // this.setPlace()
          })

          if (that.$route.params.queryAll) {
            that.queryAll = that.$route.params.queryAll
          }
          if (!that.queryAll) {
            map.centerAndZoom(point, 12)
            map.addEventListener('click', function (event) {
              let positionInfo = event.point
              let geoc = new BMap.Geocoder()
              geoc.getLocation(positionInfo, function (rs) {
                let positionInfo = event.point
                positionInfo.address = rs.address // addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
                that.$store.commit('map/updatePositionInfo', positionInfo)
                that.$router.push({
                  name: 'school',
                  params: {
                    activeName: 'school_form'
                  }
                })
              })
            })
          } else {
            map.centerAndZoom(point, 13)
            that.getAllSchoolPosition(function (data) {
              that.schoolPosition = data
              that.schoolPosition.forEach(function (schoolInfo) {
               // let position = new BMap.Point(schoolInfo.lng, schoolInfo.lat)
                that.positionInfo = new BMap.Point(schoolInfo.lng, schoolInfo.lat)
                that.addMarker(map, that.positionInfo, schoolInfo, 3000, false)
              })
            })
          }
        })
      })
    },

    methods: {

      // 切换半径
      changeRadius () {
        this.circle.setRadius(this.radius)
        this.circleList.forEach(circle => {
          circle.setRadius(this.radius)
        })
      },

      goBack () {
        if (!this.queryAll) {
          this.$router.push({
            name: 'school',
            params: {
              activeName: 'school_form'
            }
          })
        } else {
          this.$router.back()
        }
      },

      G (id) {
        return document.getElementById(id)
      },
      addMarker (map, point, info, radius, deleteFlag) {
        let that = this
        let marker = new thisBMap.Marker(point)
        map.addOverlay(marker)
        let opts = {
          width: 200,     // 信息窗口宽度
          height: 100,     // 信息窗口高度
          title: info.name,
          enableMessage: true // 设置允许信息窗发送短息
        }
        let infoWindow = new thisBMap.InfoWindow('地址:' + info.address, opts)  // 创建信息窗口对象
        that.circle = new thisBMap.Circle(point, radius, {fillColor: 'blue ', strokeWeight: 1, fillOpacity: 0.3, strokeOpacity: 0.3})
        // if (deleteFlag) {
        //  map.removeOverlay(that.circle)
       // }
        that.circleList.push(that.circle)
        map.addOverlay(that.circle)

        marker.addEventListener('click', function () {
          map.openInfoWindow(infoWindow, point) // 开启信息窗口

         /* setTimeout(function () {
            map.removeOverlay(that.circle) // 移除上一个圆形
            that.circle = new thisBMap.Circle(point, 3000, {fillColor: 'blue ', strokeWeight: 1, fillOpacity: 0.3, strokeOpacity: 0.3})
            map.addOverlay(that.circle)
          }, 1000) */
        })
      },

      // 获取所有学校位置
      getAllSchoolPosition (callBack) {
        let that = this
        that.axios.get(that.$http.httpUrl('/system/school')).then(function (response) {
          callBack(response.data.data.dataList)
        })
      },

      position (map) {
        let geolocation = new thisBMap.Geolocation()
        geolocation.getCurrentPosition(function (result) {
          if (this.getStatus() === 0) {
            let mk = new thisBMap.Marker(result.point)
            console.log(mk)
          //  map.addOverlay(mk) // 定位当前位置
            map.panTo(result.point)
          }
        })
      }
    }
  }
</script>

<style scoped>
  *{ padding: 0; margin: 0; outline: 0; }
  li{list-style: none;}
  a{text-decoration: none;color: #000000;}
  p{margin: 0;}

  #r-result a {color: #1989fa}
  #r-result a:hover {
    color: #5daf34;
  }

  .panel-body {height: 580px;width: 100%}
  p{width: 15%;height: 35px;background: #e6a23c;text-align: center;;border-radius: 4px;line-height: 35px;margin: auto;margin-top: 20px;}
  p a{color: #fff}
</style>
